<template>
  <div>
    <!-- 地图 -->
    <div class="map-container" id="containerMul" :style="styleObj"></div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'MapMulContainer',
  mixins: [], //混入
  components: {}, //组件
  props: {
    labelText: {
      type: String,
      default: '',
    },
    address: {
      type: String,
      default: '',
    },
    lng: {
      type: Number,
      default: 119.30692,
    },
    lat: {
      type: Number,
      default: 26.078093,
    },
    styleObj: {
      type: Object,
      default: () => {
        return {
          width: '100%',
          height: '600px',
        }
      },
    }
  }, //集成属性
  data() {
    return {
      map: null,
      marker: null,
      positionInfo: {
        lng: 119.30692,
        lat: 26.078093,
        address: '1111',
        province: '',
        city: '',
        district: '',
        street: '',
        streetNumber: '',
        zipcode: '',
        country: '',
        township: '',
      },
      mapAddress: "",
      autoCompleteComponent: null,
      placeSearchComponent: null,
      poiList: [],
      initialMarkers: [
        { name: '宝龙', lng: 119.29801, lat: 26.067815, address: '台江区宝龙广场' },
        { name: '苏宁', lng: 119.293592, lat: 26.067347, address: '台江区苏宁广场' },
        { name: '万象', lng: 119.297084, lat: 26.070752, address: '台江区万象城' },
        { name: '东街口地下街', lng: 119.305719, lat: 26.092157, address: '鼓楼区东街口地下街' },
        { name: '爱琴海', lng: 119.285771, lat: 26.047237, address: '仓山区爱琴海购物公园' },
        { name: '万达', lng: 119.280234, lat: 26.042222, address: '仓山区万达广场' },
        { name: '欢乐颂', lng: 119.274288, lat: 26.040176, address: '仓山区欢乐颂购物中心' }
      ],
    };
  },
  computed: {},
  methods: {
    initPosition() {
      if (this.lng && this.lat) {
        this.$set(this.positionInfo, 'lng', this.lng);
        this.$set(this.positionInfo, 'lat', this.lat);
      } else {
        this.positionInfo.lng = 119.30692
        this.positionInfo.lat = 26.078093
      }
      this.mapAddress = this.address;
      this.$set(this.positionInfo, 'address', this.address);
      this.initAMap();
    },

    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'd48e7f2bd17c16b4cb757cffbb694b90', //「你申请的安全密钥」
      };
      AMapLoader.load({
        key: '2b05e7179f91bbd5c2c8b9780493cf28', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.ToolBar',
          'AMap.Scale', 
          'AMap.Geocoder', 
          'AMap.Geolocation', 
          // 'AMap.PlaceSearch', 
          'AMap.AutoComplete', 
          'AMap.ElasticMarker',
          'AMap.CitySearch'
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        resizeEnable: true,
      }).then((AMap) => {
        this.map = new AMap.Map('containerMul', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 13,       // 初始化地图级别
          center: [this.positionInfo.lng, this.positionInfo.lat], // 初始化地图中心点位置
          scrollWheel: true,              // 是否开启鼠标滚轮缩放
          // 标准（normal）：使用标准样式，可以通过设置地图的mapStyle属性为"amap://styles/normal"来应用。
          // 幻影黑（dark）：使用幻影黑样式，设置mapStyle属性为"amap://styles/dark"。
          // 涂鸦（graffiti）：使用涂鸦样式，设置mapStyle属性为"amap://styles/graffiti"。
          // 酱籽（wine）：使用酱籽样式，虽然在搜索结果中没有直接提到酱籽的样式代码，但通常可以通过"amap://styles/wine"来尝试应用。
          // 远山黛（whitesmoke）：使用远山黛样式，设置mapStyle属性为"amap://styles/whitesmoke"。
          // 草色青（fresh）：使用草色青样式，设置mapStyle属性为"amap://styles/fresh"。
          // 极夜蓝（darkblue）：使用极夜蓝样式，设置mapStyle属性为"amap://styles/darkblue"。
          mapStyle: "amap://styles/darkblue"
          // mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782'  // 使用黑夜模式样式
          // mapStyle: JSON.stringify(yourCustomStyleJson)  // 替换为你的自定义样式JSON
        });

        this.geocoder = new AMap.Geocoder()

        this.map.addControl(new AMap.Scale())     // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        this.map.addControl(new AMap.ToolBar())   // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图

        // 强制刷新地图以确保尺寸正确
        this.map.resize();

        // 初始化添加多个标记
        this.initialMarkers.forEach(markerData => {
          let marker = new AMap.Marker({
              position: new AMap.LngLat(markerData.lng, markerData.lat),
              // width: 200,
              title: markerData.name,
              // icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
              label: {
                content: `${markerData.name}`,
              },
              offset: new AMap.Pixel(-13, -30),
              icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          });
          this.map.add(marker);
          marker.on('click', () => {
            this.showInfoWindow(marker, markerData.address);
          });
        });
      }).catch((e) => {
        console.log(e);
      });
    },

    // 声明点击事件的回调函数
    handleClick() {
      this.map.on('click', (e) => {
        /* let lng = this.positionInfo.lng = e.lnglat.lng
        let lat = this.positionInfo.lat = e.lnglat.lat

        console.log("handleClick", lng, lat)
        let marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat)
        })
        // this.map.clearMap() // 清除所有覆盖物（点标志）
        this.map.add(marker)// 添加点标志
        let lnglat = [lng, lat]
        let that = this

        that.geocoder.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.regeocode) {
            that.mapAddress = result.regeocode.formattedAddress;
            that.showInfoWindow(marker, result.regeocode.formattedAddress);//自定义信息窗体
            let thisPosition = {
              address: result.regeocode.formattedAddress,
              lng: lng,
              lat: lat
            };
            that.$emit("pickPoint", thisPosition) //返回给父组件
          } else {
            that.$message.error('根据经纬度查询地址失败')
          }
        }) */
      })
    },

    //自定义信息窗体
    showInfoWindow(marker, address) {
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //是否自定义信息窗体
        content: `<div class="addressLabel"> 地址：${address}</div>`,
        closeWhenClickMap: true,
        zIndex: 999,
        offset: new AMap.Pixel(0, -40)
      });
      infoWindow.open(this.map, marker.getPosition());
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.initPosition();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  },
  destroyed: function() {},
};
</script>
<style scoped lang="scss">
.map-box {
  display: flex;
  align-items: center;
  justify-content: center;
  .label {
    width: 240px;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
  }
}
.map-container {
  position: relative;
  padding: 0px;
  margin: 10px 0;
}

.addressLabel {
  min-width: 300px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  background-color: white;
}
</style>
